<template>
  <div>
    <el-button style="margin:40px;" type="primary" @click="open">
      {{$t('Permission.add')}}
    </el-button>
    <el-dialog :visible.sync="perflag" width="50%" :title="titleStr">
        <el-form ref="perForm" label-width="140px" :rules="rules" :model="formObj">
          <el-form-item :label="$t('Permission.name')" prop="name">
            <el-input v-model="formObj.name"></el-input>
          </el-form-item>  
           <el-form-item :label="$t('Permission.code')" prop="code">
            <el-input v-model="formObj.code"></el-input>
          </el-form-item>  
           <el-form-item :label="$t('Permission.description')" prop="description">
            <el-input v-model="formObj.description"></el-input>
          </el-form-item>  
          <el-form-item :label="$t('Permission.isEnabled')" prop="enVisible">
            <el-switch v-model="formObj.enVisible"></el-switch>
          </el-form-item>  
          
        </el-form>
        <template #footer>
          <div>
              <el-button type="primary" @click="toAdd">确定</el-button>
              <el-button type="danger" @click="perflag=false">取消</el-button>
          </div>
        </template>
    </el-dialog>
  </div>
</template>
<script>
import {addPerApi,getPerInfoApi,updatePerApi} from '@/api/permission'
export default {
  name: 'perssinIndex',
  data() {
    return {
        perflag:false,
        titleStr:"添加权限",
        formObj:{ //v-model的数据
             code: "",  //权限标识
             description: "",  //权限描述
             enVisible: 0,  //是否开启  string 1开启 0关闭
             name: "", // 权限名称
             pid:0 ,  // 父级id 
             type:1  //   整体添加1  列表添加2
        },
        rules:{ //表单规则
          name:[{required:true,message:'请输入权限名称',trigger:'blur'}],
          code:[{required:true,message:'请输入权限标识',trigger:'blur'}],
          description:[{required:true,message:'请输入权限描述',trigger:'blur'}],
          enVisible:{ //自定义规则
            validator:(rule,value,callback)=>{
              value?callback():callback(new Error('请选择是否开启'))
            }
          }
        }
    };
  },
  beforeMount() {
    this.$bus.$on('add',(id)=>{ //接收兄弟组件传来的id
      this.formObj.pid=id;//赋值给pid
      this.formObj.type=2;//
      this.perflag=true;
    })
    this.$bus.$on("toEdit",async (id)=>{
      // 接受兄弟组件传来的id 调用获取详情接口 回显
      this.perflag=true;
      this.titleStr="编辑权限"
       let res= await getPerInfoApi(id) //获取回显需要的数据
       console.log(res,"-------------")

        this.formObj=res.data //将全部数据回显

        // 是否开启的回显
        this.formObj.enVisible=res.data.enVisible=="1"?true:false
      
    })
  },
  mounted() {
    
  },

  methods: {
    open(){ //打开弹出层
      this.perflag=true
    },
    toAdd(){
      // 处理下是否开启数据
        this.formObj.enVisible=this.formObj.enVisible==true?"1":"0";
      // 表单整体验证
      this.$refs.perForm.validate(async (vali)=>{
          if(vali){
            if(this.formObj.id){
               let editRes=await updatePerApi(this.formObj)
               console.log("编辑成功")
            }else{
                let res=await addPerApi(this.formObj)
               console.log(res,"---------------添加接口")
            }
            
              this.titleStr="添加权限"
              this.perflag=false;//关闭弹出层
              this.$refs.perForm.resetFields();//重置表单
              // 触发自定义事件
              this.$bus.$emit("freshList")
          }
      })


    }
  },
};
</script>